.__avatar_body {
	--body-width: 100%;
	--body-height: 100%;
	--body-bg-color: transparent;
	--cropper-color: rgba(0, 0, 0, 0.3);
	--cropper-opaque-color: #000;
	--edge-line-width: 1px;
	--edge-line-color: #409eff;
	--viewfinder-size: 300px;
	--CTT: 100ms;
	--loading-bg-color: rgba(255, 255, 255, 0.96);
	--loading-icon-color: #409eff;
	--loading-text-color: #409eff;
	--loading-error-text-color: #f56c6c;

	width: var(--body-width);
	height: var(--body-height);
	background-color: var(--body-bg-color);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	&.__grid_bg {
		background-image: url();
	}
	& .__image_container {
		width: var(--viewfinder-size);
		height: var(--viewfinder-size);
		position: relative;
		img {
			position: absolute;
			left: 0;
			top: 0;
			transform: translate(var(--x), var(--y));
			user-select: none;
			cursor: grab;
			will-change: transform, width, height;
			&:active {
				cursor: grabbing !important;
			}
			&.__transition {
				transition: transform var(--CTT);
			}
		}
	}
	.__cropper {
		position: absolute;
		background-color: var(--cropper-color);
		transition: 240ms background-color;
		z-index: 4;
		box-sizing: border-box;
		&.top {
			left: 0;
			top: 0;
			width: 100%;
			height: calc((100% - var(--viewfinder-size)) / 2);
		}
		&.right {
			right: 0;
			top: calc((100% - var(--viewfinder-size)) / 2);
			width: calc((100% - var(--viewfinder-size)) / 2);
			height: var(--viewfinder-size);
		}
		&.bottom {
			left: 0;
			bottom: 0;
			width: 100%;
			height: calc((100% - var(--viewfinder-size)) / 2);
		}
		&.left {
			left: 0;
			top: calc((100% - var(--viewfinder-size)) / 2);
			width: calc((100% - var(--viewfinder-size)) / 2);
			height: var(--viewfinder-size);
		}
	}
	&:not(.__opaque_cropper).__edge_line .__cropper {
		&.top {
			&::after {
				content: '';
				display: block;
				position: absolute;
				border-bottom: var(--edge-line-width) solid var(--edge-line-color);
				left: calc(((100% - var(--viewfinder-size)) / 2) - 1px);
				bottom: 0;
				width: calc(var(--viewfinder-size) + 2px);
			}
		}
		&.right {
			border-left: var(--edge-line-width) solid var(--edge-line-color);
		}
		&.bottom {
			&::after {
				content: '';
				display: block;
				position: absolute;
				border-bottom: var(--edge-line-width) solid var(--edge-line-color);
				left: calc(((100% - var(--viewfinder-size)) / 2) - 1px);
				top: 0;
				width: calc(var(--viewfinder-size) + 2px);
			}
		}
		&.left {
			border-right: var(--edge-line-width) solid var(--edge-line-color);
		}
	}
	&.__opaque_cropper .__cropper {
		background-color: var(--cropper-opaque-color);
	}
	.__loading_mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2000;
		background-color: var(--loading-bg-color);
		display: flex;
		align-items: center;
		.__loading_inner {
			width: 100%;
			text-align: center;
			.__circular {
				width: 40px;
				height: 40px;
				animation: __loading_rotate 2s linear infinite;
				circle {
					stroke-dasharray: 90, 150;
					stroke-dashoffset: 0;
					stroke-width: 2;
					stroke: #409eff;
					stroke-linecap: round;
					animation: __loading_dash 1.5s ease-in-out infinite;
				}
			}
			.__loading_text {
				color: var(--loading-text-color);
				margin-top: 6px;
				font-size: 14px;
				&.__error {
					color: var(--loading-error-text-color);
				}
			}
		}
	}
	// 加载旋转动画
	@keyframes __loading_rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	// 加载内部旋转动画
	@keyframes __loading_dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}
		100% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}
	// 加载过度动画
	.__loading-enter,
	.__loading-leave-to {
		opacity: 0;
	}
	.__loading-enter-active,
	.__loading-leave-active {
		transition: opacity 150ms;
	}
	.__loading-enter-to,
	.__loading-leave {
		opacity: 1;
	}
}
